<template>
  <div class="post">
      <div class="left">
          <postLeftContent
          @checkPost="checkPost"
          />
      </div>
      <div class="right">
          <postRightContent
          :articleArr = "articleArr"
          :flag = "flag"
          @nextPage = "nextPage"/>
      </div>
  </div>
</template>

<script>
// 引入文章主页的左边部分
import postLeftContent from '@/components/post/postLeftContent'
// 引入文章主页的右边部分
import postRightContent from '@/components/post/postRightContent'
export default {
    data(){
        return {
            articleArr: {
                total: 0
            },
            start: 0,
            limit: 5,
            cityName: '广州',
            flag: true
        }
    },
    components: {
        postLeftContent,
        postRightContent
    },
    mounted(){

    },
    methods:{
        nextPage(pageIndex){
            console.log(pageIndex);
            this.flag = false;
            this.start = (pageIndex-1) * this.limit;
            this.getAllArticle();
        },
        checkPost(cityName){
            this.start = 0;
            this.cityName = cityName;
            this.flag = true;
            this.getAllArticle();
        },
        async getAllArticle(){
            let res = await this.$store.dispatch('post/getArticleArrayByCityName',
                {
                    city: this.cityName,
                    _start: this.start,
                    _limit: this.limit
                }
            )
            console.log(res.data);
            this.articleArr = res.data;            
        }
    },
    mounted(){
        this.getAllArticle();
    }
}
</script>

<style scoped lang="less">
    .post{
        width: 1000px;
        margin: 20px auto;
        display: flex;
        justify-content: space-between;
        .left{
            flex:  0 0 30%;
        }  
        .right{
            flex: 1;
        }
    }
</style>